//
// Scrollbars for main flex containers
// ------------------------------------------------------

:not(.ios) {
  ::-webkit-scrollbar {
    height: 10px;
    overflow: visible;
    width: @scrollbar-width;
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: @scrollbar-thumb;
    border: solid transparent;
    border-width: 1px 1px 1px 1px;
    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
    max-height: 60px;
    min-height: 28px;
    padding: 100px 0 0;
    &:active,
    &:hover {
      background-color: @scrollbar-thumb-hover;
    }
  }

  ::-webkit-scrollbar-track {
    background-clip:padding-box;
    background-color: @scrollbar-track;
  }

  .chromeless .middle,
  .landing,
  .landing-side-bar,
  .log-view .log-view-output,
  .project-bar .dropdown-menu {
    &::-webkit-scrollbar-thumb {
      background-color: @scrollbar-thumb-inverse;
      box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
      &:active,
      &:hover {
        background-color: @scrollbar-thumb-hover-inverse;
      }
    }
  }

  .landing::-webkit-scrollbar-track {
    background-color: @scrollbar-track-landing;
  }

  .landing-side-bar::-webkit-scrollbar-track {
    background-color: @scrollbar-track-landing-side-bar;
  }

  .project-bar ::-webkit-scrollbar-track {
    background-color: @scrollbar-track-inverse;
  }
}
